এসভিজি (SVG) একটি শক্তিশালী গ্রাফিক্স ফরম্যাট যা ওয়েব ডেভেলপমেন্টে ব্যবহৃত হয়, এবং এটি ইন্টারঅ্যাকটিভিটি এবং ইভেন্ট হ্যান্ডলিং প্রদান করতে সক্ষম। এসভিজি উপাদানগুলির উপর বিভিন্ন ধরনের ইভেন্ট যেমন ক্লিক, হোভার, কিপ্রেস ইত্যাদি ব্যবহার করা যায়, যা ব্যবহারকারীকে আরও ইন্টারঅ্যাকটিভ এক্সপিরিয়েন্স প্রদান করে। এসভিজি ইভেন্ট হ্যান্ডলিং JavaScript অথবা HTML-এর মাধ্যমে সম্পন্ন করা যেতে পারে।
এখানে এসভিজি ইভেন্ট হ্যান্ডলিং এবং ইন্টারঅ্যাকটিভিটি নিয়ে বিস্তারিত আলোচনা করা হলো।
1. SVG Event Handling with JavaScript
এসভিজি উপাদানগুলিতে ইভেন্ট হ্যান্ডলিং করার জন্য JavaScript ব্যবহার করা হয়। JavaScript দিয়ে আপনি এসভিজি উপাদানে ক্লিক, হোভার, ডাবল ক্লিক, মাউস মুভমেন্ট ইত্যাদি ইভেন্টের জন্য event listeners সেট করতে পারেন। এসভিজি উপাদানগুলিতে ইভেন্ট লিসেনার অ্যাটাচ করা খুব সহজ এবং এটি ইন্টারঅ্যাকটিভ ডিজাইন তৈরির জন্য গুরুত্বপূর্ণ।
উদাহরণ: Click Event Handling on SVG Element
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="100" cy="100" r="50" fill="blue" />
<script>
document.getElementById("circle1").addEventListener("click", function() {
alert("Circle clicked!");
});
</script>
</svg>
এখানে:
addEventListenerমেথডের মাধ্যমেclickইভেন্ট আনা হয়েছে, যাতে বৃত্তটির উপর ক্লিক করলে একটি এলার্ট দেখানো হবে।
2. SVG Hover Effects
Hover Effects ব্যবহার করে আপনি এসভিজি উপাদানগুলিতে মাউস হোভার করলে কোনও পরিবর্তন ঘটাতে পারেন, যেমন রঙ পরিবর্তন বা আকার বাড়ানো। এটি CSS বা JavaScript দিয়ে করা যেতে পারে।
উদাহরণ: Hover Effect with CSS
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" class="hover-circle" />
</svg>
<style>
.hover-circle:hover {
fill: red; /* When hovered, the circle color will change to red */
cursor: pointer;
}
</style>
এখানে:
:hoverপসুডোক্লাস ব্যবহার করা হয়েছে, যা বৃত্তের রঙ পরিবর্তন করে যখন ইউজার তার উপর মাউস হোভার করেন।
3. Double Click Event Handling
এসভিজি উপাদানগুলিতে ডাবল ক্লিক (double-click) ইভেন্টও ব্যবহার করা যেতে পারে। ডাবল ক্লিক ইভেন্টটি সাধারণত আরও বিশেষ ধরনের ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়, যেমন একটি বক্স নির্বাচন করা বা অন্য কোন স্থানে নিয়ে যাওয়া।
উদাহরণ: Double Click Event Handling
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="circle2" cx="100" cy="100" r="50" fill="green" />
<script>
document.getElementById("circle2").addEventListener("dblclick", function() {
this.setAttribute("fill", "yellow");
});
</script>
</svg>
এখানে:
dblclickইভেন্টের মাধ্যমে, বৃত্তটি ডাবল ক্লিক করলে তার রঙ সবুজ থেকে হলুদ হয়ে যাবে।
4. SVG Mouse Events (Mouseover, Mouseout, Mousemove)
এসভিজি উপাদানগুলির জন্য মাউস সম্পর্কিত বিভিন্ন ইভেন্ট যেমন mouseover, mouseout, এবং mousemove ব্যবহার করা যায়। এগুলি ব্যবহারকারীর মাউস পজিশন ট্র্যাক করার জন্য উপযুক্ত এবং ওয়েব পেজে ইন্টারঅ্যাকটিভ এক্সপিরিয়েন্স তৈরি করতে সহায়তা করে।
উদাহরণ: Mouseover and Mouseout Events
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="circle3" cx="100" cy="100" r="50" fill="purple" />
<script>
var circle = document.getElementById("circle3");
circle.addEventListener("mouseover", function() {
this.setAttribute("fill", "orange");
});
circle.addEventListener("mouseout", function() {
this.setAttribute("fill", "purple");
});
</script>
</svg>
এখানে:
mouseoverইভেন্টের মাধ্যমে বৃত্তের রঙ বেগুনি থেকে কমলা পরিবর্তিত হয় যখন মাউস তার উপর চলে আসে।mouseoutইভেন্টের মাধ্যমে রঙ আবার বেগুনি হয়ে যায় যখন মাউস বৃত্তের বাইরে চলে যায়।
5. SVG Drag and Drop
Drag and Drop হল এমন একটি ইন্টারঅ্যাকটিভ ফিচার যেখানে ব্যবহারকারী একটি উপাদানকে ড্র্যাগ করে এবং ড্রপ করতে পারে। এসভিজি উপাদানে ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং JavaScript দিয়ে করা সম্ভব।
উদাহরণ: SVG Drag and Drop
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<circle id="circle4" cx="100" cy="100" r="40" fill="blue" />
<script>
var circle = document.getElementById("circle4");
circle.addEventListener("mousedown", function(evt) {
var offsetX = evt.clientX - circle.getBoundingClientRect().left;
var offsetY = evt.clientY - circle.getBoundingClientRect().top;
function drag(evt) {
circle.setAttribute("cx", evt.clientX - offsetX);
circle.setAttribute("cy", evt.clientY - offsetY);
}
function drop() {
document.removeEventListener("mousemove", drag);
document.removeEventListener("mouseup", drop);
}
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", drop);
});
</script>
</svg>
এখানে:
- mousedown ইভেন্টের মাধ্যমে, বৃত্তটি টেনে আনার জন্য ড্র্যাগ শুরু হয় এবং mousemove ইভেন্টের মাধ্যমে বৃত্তটির অবস্থান আপডেট করা হয়।
- mouseup ইভেন্টের মাধ্যমে ড্র্যাগিং শেষ হয়।
সারাংশ
এসভিজি (SVG) গ্রাফিক্সের উপর ইভেন্ট হ্যান্ডলিং এবং ইন্টারঅ্যাকটিভিটি যোগ করা ওয়েব ডিজাইনে গুরুত্বপূর্ণ। JavaScript এবং CSS ব্যবহার করে আপনি এসভিজি উপাদানে click, hover, dblclick, drag and drop, এবং অন্যান্য ইভেন্ট হ্যান্ডলিং কার্যক্রম যুক্ত করতে পারেন। এই সব কৌশলগুলির মাধ্যমে ওয়েবসাইট বা অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভ এক্সপিরিয়েন্স বৃদ্ধি করা সম্ভব।
Read more
